<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 200px;
                height: 400px;
                background: skyblue;
            }
        </style>
        <script src="jquery-3.2.1.min.js"></script>
        <script>
            $(function () {
                $('.btn').eq(0).on('click',function () {
                    $('div').slideUp(1000);
                })
                $('.btn').eq(1).on('click',function () {
                    $('div').slideDown(1000);
                })
                $('.btn').eq(2).on('click',function () {
                    $('div').slideToggle(1000);
                })
            })
        </script>
    </head>
<body>
<button class="btn">slideUp</button>
<button class="btn">slideDown</button>
<button class="btn">slideToggle</button>
<div></div>
</body>
</html>
</head>
<body>

</body>
</html>